<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="../css/list.css">
</head>
<body>
    <div class="header">
        <div class="header-left">
            <span>杭州站</span>
            <span> <a href="./login.html">登录</a> </span>
            <span> <a href="./register.html">注册</a> </span>
        </div>
        <div class="header-right">
            <span> <a href="./index.html">网商园首页</a> </span>
            <span> <a href="">进货车</a> </span>
            <span>用户中心</span>
            <span>收藏夹</span>
            <span>供应商中心</span>
            <span>联系客服</span>
            <span>网站导航</span>
            <span>帮助中心</span>
            <span>消息</span>
            <span>手机版</span>
        </div>
    </div>    
    <!-- 第二部分大图 -->
    <div class="two-img">
        <img src="../images/listbig.jpg" alt="">
    </div>
    <!-- 渲染部分 -->
    
       
        <!-- 渲染页面 -->
        <ul class="content">

        </ul>
        <div class="loading">
          <!-- <img src="https://img.zcool.cn/community/015af75b58229ca801215c8fbb2a41.gif" alt=""> -->
          加载中...
        </div>
      
        
<!-- 底部 -->
<div class="footer-three">
    <div>增值电信业务经营许可证: 浙B2-20150326 | 经营性网站备案信息: 浙ICP备18051280号-3 | 浙公网安备案 33010802002999号 | 法律顾问: 浙江天册律师事务所</div>
    <div>Copyright  ©  2010-2021  网商园wsy.com  版权所有</div>
</div>
<div class="footer-four">
    <img src="../images/zhucedibu.png" alt="">
</div>
<div class="footer-five"> 
    战略合作伙伴: 摄影基地  |  四季 |  常熟国际服装城  | ZAIQ  | 好四季服装电商城 | 华中衣库 | 潮鞋基地 | 大河新村 | HK99原创基地 | 保太和服饰城 | 双奇电商城
</div>


        <script src="../js/dm_list.js"></script>
        <script>
          console.log(list)
      
          /*
            瀑布流
      
            需求分析:
              1. 打开页面, 加载第一页数据
                + 从数组中截取一部分数据, 渲染在页面上
              2. 当你滚动到指定位置的时候, 加载第二页
                + 指定位置: 第一页的数据浏览完毕的时候
                + 从数组中截取出一部分内容, 继续渲染在页面上
                + 注意: 不是把之前的覆盖, 而是在原先的基础上增加
          */
      
          // 0. 获取元素
          var content = document.querySelector('ul')
          var loading = document.querySelector('.loading')
      
          // 0. 准备一些变量
          // 0-1. 表示当前第几页
          var current = 1
          // 0-2. 表示一页多少条
          var pagesize = 8
          // 0-3. 一共多少页
          var total = Math.ceil(list.length / pagesize)
          // 0-4. 准备一个开关
          var flag = true
      
          // 1. 准备一个渲染页面的函数
          function bindHtml() {
            // 1-1. 从数组中截取出部分数据
            var bindList = list.slice((current - 1) * pagesize, current * pagesize)
      
            // 1-2. 组装 html 结构字符串
            var str = ''
            bindList.forEach(function (item) {
              str += `
                <li>
                  <img src="${ item.pic }" alt="">
                  <p>${ item.name }</p>
                  <p>城市: ${ item.city }</p>
                  <p>地址: ${ item.address }</p>
                  <p>价格: ${ item.price }</p>
                  <p>演出时间: ${ item.showTime }</p>
                </li>
              `
            })
      
            // 1-3. 把内容插入到 ul 内部
            // 注意: 需要写的是 +=, 因为我们每次需要在当前的基础上加上我组装好的第 x 页的 html 结构
            // 注意: 保证原先 ul 内不要有内容, 因为不会覆盖了, 而是叠加
            content.innerHTML += str
          }
      
          // 打开页面需要第一页数据
          bindHtml()
      
          // 2. 准备加载下一页
          // 问题1: 什么时候去判断是否要加载下一页 ?
          // 随着滚动实时判断
          window.onscroll = function () {
            // 问题2: 有没有必然不加载下一页的情况 ?
            // 全部加载完毕以后, current >= total
            if (current >= total) return
      
            // 2-2. 判断是否应该加载下一页了
            // 问题3: 如何判断该加载下一页了 ?
            // ul 上方偏移量 + ul 的高度 <= 可视窗口高度 + 浏览器卷去的高度
            var ul_top = content.offsetTop
            var ul_height = content.offsetHeight
            var window_height = document.documentElement.clientHeight
            var window_top = document.documentElement.scrollTop || document.body.scrollTop
      
            if (ul_top + ul_height > window_height + window_top) return
      
            // 代码执行到这里, 表示该加载下一页了
      
            // 判断一下, 如果开关是关闭的, 不再加载下一页
            if (!flag) return
      
            // 代码能执行到这里, 表示开关是开启的, 可以加载下一页
            // 把开关关闭
            flag = false
      
            // 这个位置的代码随着滚动, 只要满足条件随时触发
            // 你只要触发一次, 就会开启一个定时器
      
            // 2-3. 让 loading 效果显示出来
            loading.style.display = 'block'
      
            // 2-4. 设置一个定时器, 延时加载第二页数据
            setTimeout(function () {
              // 把当前页变量进行 ++ 操作
              current++
      
              // 从新渲染页面
              bindHtml()
      
              // 加载完毕让 loading 消失
              loading.style.display = 'none'
      
              // 当页面渲染完毕, 此时页面已经变的更长了
              // ul 变得更高了
              // 可以准备加载下一页了
              flag = true
            }, 1000)
          }
      
        </script>
</body>
</html>